<template>
	<view class="item" @click="getDetail(p_item.id)">
		<view class="topUser">
			<view class="left">
				<image :src="p_item.u.header[0]" class="userPhoto" :lazy-load="true"></image>
			</view>
			<view class="right">{{p_item.u.name}}</view>
		</view>
		<view class="contentText">
			<text class="cate" v-if="p_item.cate.length>0">#{{p_item.cate}}#</text>{{p_item.text}}
		</view>
		<view class="centerMedia">
			<image :lazy-load="true" @tap.stop="viewImage(p_item.image.big[0])" style="max-height: 300px;" v-if="p_item.type=='image'" class="centerImage" mode="aspectFill" :src="p_item.image.big[0]"></image>
			<view class="videoView" @click.stop="isShowMask=true" v-if="p_item.type=='video'">
				<image :lazy-load="true"  :src="p_item.video.thumbnail[0]" mode="widthFix" class="centerImage"></image>
				<text class="iconfont icon-bofang"></text>
			</view>
			<image :lazy-load="true" @tap.stop="viewImage(p_item.gif.images[0])" style="max-height: 300px;" :src="p_item.gif.images[0]" v-if="p_item.type=='gif'" class="centerImage" mode="top left"></image>
		</view>
		<view class="bottomHotComment" v-for="(t,t_index) in p_item.top_comments" :key="t_index">
			<view class="hotCommentUser">
				<view class="left">
					<image :lazy-load="true" :src="t.u.header[0]" class="commentUserPhoto"></image>
				</view>
				<view class="center">{{t.u.name}}</view>
				<view class="likeNum">
					<text class="iconfont icon-zan"></text>
					{{t.like_count}}
				</view>
			</view>
			<view class="hotCommentText">
				{{t.content}}
			</view>
		</view>
		<view class="bottomZanCai">
			<view class="zan">
				<text class="iconfont icon-zan"></text>
				{{p_item.up}}
			</view>
			<view class="comment"> 
				<text class="iconfont icon-huifu"></text>
				 {{p_item.comment}}
			</view>
			<view class="forward" @tap.stop="sharePostItem">
				<text class="iconfont icon-forward"></text>
				{{p_item.forward}}
			</view>
		</view>
		<view class="videoPlayMask" v-if="isShowMask" @tap.stop="isShowMask=false">
			<video :src="p_item.video.video[0]" :poster="p_item.video.thumbnail[0]"></video>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isShowMask:false
			};
		},
		props:["p_item"],
		methods:{
			viewImage(imgUrl){
				uni.previewImage({
					urls:[imgUrl]
				});
			},
			getDetail(id){
				uni.setStorageSync("p_item",this.p_item);
				uni.navigateTo({
					url:"/pages/postDetail/postDetail?id="+id
				});
			},
			sharePostItem(){
				//#ifdef APP-PLUS
				uni.showActionSheet({
					itemList:["分享给QQ空间","分享到QQ好友"],
					success:res=>{
						if(res.tapIndex==0){
							uni.showToast({
								title:"暂未开通",
								icon:"none"
							});
						}
						else if(res.tapIndex==1){
							var imgUrl="";
							if(this.p_item.type=="video"){
								imgUrl=this.p_item.video.thumbnail_small[0];
							}
							else if(this.p_item.type=="image"){
								imgUrl=this.p_item.image.thumbnail_small[0];
							}
							else if(this.p_item.type=="gif"){
								imgUrl=this.p_item.gif.gif_thumbnail[0];
							}
							uni.share({
								provider:"qq",
								href:this.p_item.share_url,
								imageUrl:imgUrl,
								title:this.p_item.text.length>10?this.p_item.text.substr(0,10):this.p_item.text,
								success: (res) => {
									uni.showToast({
										title:"分享成功",
										icon:"none"
									});
								}
							});
						} 
					}
				})
				//#endif
				//#ifdef MP-WEIXIN
				wx.showShareMenu({
					withShareTicket:true
				});
				//#endif
			}
		}
	}
</script>


